/**
 * @author lu
 * @date 2018/8/17 16:39
 */

var Hamster = (function () {
    Hamster.prototype.time = 5;
    Hamster.prototype.startTime = 0;
    Hamster.prototype.isLive = false;

    function Hamster() {
        var hi = Math.random() * 55 >>> 0;
        this.hi = hi;
    }

    Hamster.prototype.draw = function (ctx, x, y) {
        if (!this.isLive) {
            return;
        }
        // 计时
        var time = new Date().getTime();
        this.time = 5 - ((time - this.startTime) / 1000 >> 0);
        if (this.time < 0) {
            this.recoverItem("lose");
        }
        else if (this.time <= 5 && this.time >= 0) {
            Game.ctx.fillStyle = "#fff";
            var text = "" + this.time;
            var tw = ctx.measureText(text).width;
            ctx.fillText(text, x + (30 - tw) / 2, y);
            ctx.drawImage(hamsterFrameImg, this.hi * 30, 0, 30, 30, x, y, 30, 30);
        }

    };
    Hamster.prototype.recoverItem = function (type) {
        Game[type]++;
        var off = Math.random() * 6;
        this.hi = Math.random() * 55 >>> 0;
        this.startTime = new Date().getTime() + off * 1000;
    };

    return Hamster;
}());

var hole = new function () {
    this.row = 3;
    this.column = 3;


    this.draw = function (ctx) {
        var img = document.createElement("img");
        var _this = this;

        img.onload = function (e) {

            var column = _this.column;
            var row = _this.row;
            var onew = Game.width / column;
            var oneh = Game.height / row;

            var x = 0;
            var y = 0;
            for (var i = 0; i < column; i++) {
                y = i * oneh + (oneh - img.height) / 2;
                for (var j = 0; j < row; j++) {
                    x = j * onew + (onew - img.width) / 2;
                    ctx.drawImage(img, 0, 0, img.width, img.height, x, y, img.width, img.height);
                }
            }
            _this.width = img.width;
            _this.height = img.height;

            console.log(">>地洞打造完毕" + onew);
        }
        img.src = "./res/hole.png";

    }

    return this;
}

var bgLayer = new function () {
    this.init = function (ctx) {
        var img = new Image();
        img.onload = function (e) {
            ctx.drawImage(img, 0, 0, img.width, img.height);
            hole.draw(ctx);
        };
        img.src = "res/bg.jpg";
    }
    return this;
}

var hamsterFrameImg = new Image();

var statPanel = new function () {
    this.draw = function (ctx) {
        ctx.fillStyle = "rgba(0,0,0,0.3)";
        var kText = "击杀：" + Game.kill;
        var lText = "错过：" + Game.lose;
        var kw = ctx.measureText(kText).width;
        var lw = ctx.measureText(lText).width;
        var rw = kw + 50 + lw;
        var rh = 20;
        var x = (Game.width - rw) / 2;
        var y = 0;
        ctx.fillRect(x, y, rw, rh);
        ctx.fillStyle = "#fff";
        ctx.font = "14px";

        ctx.fillText(kText, x+10, 14);
        ctx.fillText(lText, x + kw + 40, 14);

        ctx.fill();
    }
    return this;
}

var Game = new function () {
    this.kill = 0;
    this.lose = 0;
    this.hamsters = [];
    this.isRun = false;
    this.flagList = [];
    this.init = function () {
        var canvas = document.getElementById("game");
        var ctx = canvas.getContext("2d");
        var bgCanvas = document.getElementById("bg");
        var bgCtx = bgCanvas.getContext("2d");

        this.width = canvas.width;
        this.height = canvas.height;
        this.ctx = ctx;
        this.bgCtx = bgCtx;
        this.canvas = canvas;
        this.bgCanvas = bgCanvas;

        bgLayer.init(bgCtx);

        var foesSize = hole.column * hole.row;
        for (var i = 0; i < foesSize; i++) {
            this.hamsters[i] = new Hamster();
        }

        for (var r = 0; r < Game.hamsters.length; r++) {
            this.flagList[r] = r;
        }

        hamsterFrameImg.onload = function (e) {
            Game.loop();
        }
        hamsterFrameImg.src = "res/faces.png";
    }

    this.loop = function () {
        requestAnimationFrame(Game.loop);

        if (!Game.isRun) {
            return;
        }
        Game.ctx.clearRect(0, 0, Game.width, Game.height);
        var onew = Game.width / hole.column;
        var oneh = Game.height / hole.row;

        statPanel.draw(Game.ctx);
        for (var i = 0; i < hole.row; i++) {
            var y = i * oneh + (oneh - 30) / 2;
            for (var j = 0; j < hole.column; j++) {
                var x = j * onew + (onew - 30) / 2;
                Game.hamsters[i * hole.column + j].draw(Game.ctx, x, y);
            }
        }

    }

    this.drawHamsters = function () {


    }

    this.run = function () {

        var startTime = new Date().getTime();

        var flagList = this.flagList;

        for (var i = 0; i < Game.hamsters.length; i++) {
            console.log(startTime);
            var index = Math.random() * flagList.length >>> 0;
            var hi = flagList[index];
            //去掉重复
            flagList.splice(index, 1);
            Game.hamsters[hi].startTime = startTime + i * 1000;
            Game.hamsters[hi].isLive = true;
        }

        Game.isRun = true;
    }
    return this;
}
